import React from 'react';
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { connect } from "react-redux";
import './index.less';

const url = `https://api.mz-moe.cn/img/img${parseInt(Math.random() * 951)}.jpg`

function Page(state) {
  console.log('state', state)
  const { history } = state
  const onFinish = ({ username, password }) => {
    if (username === 'admin' && password === 'admin') {
      message.success('登录成功')
      window.localStorage.setItem('token', Date.now())
      history.push('/')
    } else {
      message.warning('用户名或密码错误')
    }
  };

  return (
    <div className="login">
      <div className="login-form">
        <div className="login-form-left" style={{ backgroundImage: `url(${url})` }}></div>
        <div className="login-form-right">
          <h1>测试管理系统</h1>
          <Form
            style={{ width: '350px' }}
            name="basic"
            onFinish={onFinish}
            size="large"
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入您的账号!' }]}
            >
              <Input prefix={<UserOutlined />} placeholder="请输入您的账号" />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入您的密码!' }]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder="请输入您的密码" />
            </Form.Item>
            <Button style={{ width: '100%' }} type="primary" htmlType="submit">登录</Button>
          </Form>
        </div>
      </div>
    </div>
  )
}

export default connect(state => state)(Page);
